<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow @click-left="$router.back()" />
    <van-index-bar
      :index-list="indexList"
      v-for="(item, index) in indexList"
      :key="index"
      :highlight-color="'#1cb676'"
    >
      <van-index-anchor  :index="item">{{
        item === "#" ? "当前城市" : item === "热" ? "热门城市" : item
      }}</van-index-anchor>
      <template v-if="item === '#'">
        <van-cell title="北京" />
      </template>
      <template v-else-if="item === '热'">
        <van-cell
          :title="item.label"
          v-for="(item, index) in hotList"
          :key="index"
        />
      </template>
      <template v-else>
        <!-- 如果索引等于每一项城市的开头的第一位 -->
        <template v-for="(item1, index) in cityList">
          <van-cell
            v-if="item===item1.short[0]"
            :title="item1.label"
            :key="index"
          />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import { Hotcity, CityOneFn } from '@/api/area'
export default {
  data () {
    return {
      indexList: [
        '#',
        '热',
        'a',
        'b',
        'c',
        'd',
        'f',
        'g',
        'h',
        'k',
        'l',
        'm',
        'n',
        'r',
        's',
        't',
        'x',
        'y',
        'z'
      ],
      hotList: [],
      cityList: []
    }
  },
  async created () {
    const res = await Hotcity()
    console.log(res.body)
    this.hotList = res.body
    const data = await CityOneFn()
    this.cityList = data.body
  }
}
</script>

<style>
</style>
